import React, { useState, useRef } from 'react'
import { Col, Row, Input, Select, Button } from 'antd';
import './GameList.css'
import axios from 'axios'


export default function GameList() {
  const [typeText, setTypeText] = useState('')
  const typeList = [
    {
      value: 'iqq',
      label: 'QQ区',
    },
    {
      value: 'iwx',
      label: '微信区',
    },
  ]
  const inputText = useRef('')
  const handleChangeType = (value) => {
    setTypeText(value)
  }
  const [yxList, setYxList] = useState({})
  const searchChange = () => {
    axios.get('/mini/hero/getHeroInfo.php?hero=' + inputText.current.input.value + '&type=' + typeText).then(res => {
      setYxList(res.data.data)
    })
  }

  return (
    <div className='kBox1'>
      <div className='leftBox1'>
        <Row>
          <Col span={4}>
            <Select
              defaultValue="请选择大区"
              style={{
                width: 200,
              }}
              onChange={handleChangeType}
              options={typeList}
            />
          </Col>
          <Col span={4}>
            <Input placeholder="请输入英雄名称" ref={inputText} type="text" />
          </Col>
          <Col span={3}>
            <Button type="primary" onClick={() => searchChange()}>查询</Button>
          </Col>
        </Row>
        <div style={{ width: '100%;' }}>
          {/* <div className='zanwu'>
            暂无数据
          </div> */}
          <div className='yxbox'>
            <div style={{ marginTop: '20px' }} className='xyzbox'>
              <div className='libox'>
                <div style={{ marginRight: '10px', }}>大区:</div>
                <div>{yxList.platform}</div>
              </div>
              <div className='libox'>
                <div style={{ marginRight: '10px', }}>英雄名称:</div>
                <div>{yxList.name}</div>
              </div>
              <div className='libox'>
                <div style={{ marginRight: '10px', }}>别名:</div>
                <div>{yxList.alias}</div>
              </div>
              <div className='libox'>
                <div style={{ marginRight: '10px', }}>县:</div>
                <div>{yxList.area}-{yxList.areaPower}分</div>
              </div>
              <div className='libox'>
                <div style={{ marginRight: '10px', }}>市:</div>
                <div>{yxList.city}-{yxList.cityPower}分</div>
              </div>
              <div className='libox'>
                <div style={{ marginRight: '10px', }}>省:</div>
                <div>{yxList.province}-{yxList.provincePower}分</div>
              </div>
              <div className='libox'>
                <div style={{ marginRight: '10px', }}>国服:</div>
                <div>{yxList.guobiao}分</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
